﻿@page "/progress-bar/radius"
@using Syncfusion.Blazor.ProgressBar
@using Syncfusion.Blazor
@inject NavigationManager Navigation
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates a circular progress bar with customization options like radius, inner-radius, pie progress, track and progress thickness.</p>
</SampleDescription>
<ActionDescription>
    <p>This demo for Blazor Progress Bar control shows the customizing options for radius, inner-radius, pie progress, track and progress thickness customization.</p>
</ActionDescription>

<div class="control-section">
    <div class="row" style="margin-top: 4%;">
        <div class="col-lg-3 col-md-3 col-3" align="center">
            <SfProgressBar ID="FullBackground"
                           @ref="ProObj1"
                           Type="ProgressType.Circular"
                           Minimum="0"
                           Maximum="100"
                           Value="60"
                           Width="160px"
                           Height="170px"
                           Radius="100%"
                           InnerRadius="190%"
                           ProgressThickness="10"
                           TrackThickness="80"
                           ProgressColor="white"
                           CornerRadius="CornerType.Round"
                           TrackColor="@FullTrackColor"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="3000" Delay="0" />
                <ProgressBarAnnotations>
                    <ProgressBarAnnotation>
                        <ContentTemplate>
                            <div style='font-size:20px;font-weight:bold;color:#ffffff;fill:#ffffff'><span>60%</span></div>
                        </ContentTemplate>
                    </ProgressBarAnnotation>
                </ProgressBarAnnotations>
            </SfProgressBar>
        </div>

        @*<div class="col-lg-4 col-md-4 col-4" align="center">
            <SfProgressBar ID="PartBackground"
                           Type="ProgressType.Circular"
                           Value="60"
                           Minimum="0"
                           Maximum="100"
                           Width="160px"
                           Height="170px"
                           Radius="80px"
                           InnerRadius="80px"
                           TrackThickness="62"
                           ProgressThickness="59"
                           TrackColor="lightgrey"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="3000" Delay="0" />
            </SfProgressBar>

        </div>*@

        <div class="col-lg-3 col-md-3 col-3" align="center">
            <SfProgressBar ID="OuterRadius"
                           @ref="ProObj2"
                           Type="ProgressType.Circular"
                           Value="90"
                           Minimum="0"
                           Maximum="100"
                           Width="160px"
                           Height="170px"
                           InnerRadius="72"
                           ProgressThickness="8"
                           CornerRadius="CornerType.Round"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="3000" Delay="0" />
            </SfProgressBar>
        </div>

        <div class="col-lg-3 col-md-3 col-3" align="center">
            <SfProgressBar ID="OnRadius"
                           @ref="ProObj3"
                           Type="ProgressType.Circular"
                           Value="90"
                           Minimum="0"
                           Maximum="100"
                           Width="160px"
                           Height="170px"
                           TrackThickness="3"
                           ProgressThickness="8"
                           CornerRadius="CornerType.Round"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="3000" Delay="0" />
            </SfProgressBar>
        </div>

        <div class="col-lg-3 col-md-3 col-3" align="center">
            <SfProgressBar ID="Pie"
                           @ref="ProObj4"
                           Type="ProgressType.Circular"
                           Value="70"
                           Minimum="0"
                           Maximum="100"
                           Width="160px"
                           Height="170px"
                           EnablePieProgress="true"
                           CornerRadius="CornerType.Round"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="3000" Delay="0" />
            </SfProgressBar>
        </div>
    </div>
    <div class="row" align="center">
        <button id="reLoad" class="e-control e-btn e-lib e-outline e-primary" @onclick="ProgressRefresh">Reload</button>
    </div>
</div>

@code{
    SfProgressBar ProObj1, ProObj2, ProObj3, ProObj4;
    public async Task ProgressRefresh()
    {
        await ProObj1.RefreshAsync();
        await ProObj2.RefreshAsync();
        await ProObj3.RefreshAsync();
        await ProObj4.RefreshAsync();
    }

    string CurrentUri;
    string FullTrackColor;
    Theme CurrentTheme;
    protected override void OnInitialized()
    {
        CurrentUri = Navigation.Uri;
        if (CurrentUri.IndexOf("material") > -1)
        {
            CurrentTheme = Theme.Material;
            FullTrackColor = "#e91e63";
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            CurrentTheme = Theme.Fabric;
            FullTrackColor = "#0078D6";
        }
        else if (CurrentUri.IndexOf("bootstrap4") > -1)
        {
            CurrentTheme = Theme.Bootstrap4;
            FullTrackColor = "#007bff";
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            CurrentTheme = Theme.Bootstrap;
            FullTrackColor = "#317ab9";
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            CurrentTheme = Theme.HighContrast;
            FullTrackColor = "#FFD939";
        }
        else if (CurrentUri.IndexOf("tailwind") > -1)
        {
            CurrentTheme = Theme.Tailwind;
            FullTrackColor = "#4F46E5";
        }
        else
        {
            CurrentTheme = Theme.Bootstrap4;
        }
    }
}
<style>
    #control-container {
        padding: 0px !important;
    }

    .progress-text-align {
        font-family: Roboto-Regular;
        font-size: 14px;
        color: #3D3E3C;
    }


    #reLoad {
        border-radius: 4px;
        text-transform: capitalize;
        margin-top: 3%;
    }
</style>